<template>
    <div>
        <div style="margin-bottom: 15px">
            <el-input v-model="params.name" style="width: 200px ; height: 40px" placeholder="请输入姓名"></el-input>
            <el-input v-model="params.phone" style="width: 200px ; height: 40px ; margin-left :5px" placeholder="请输入电话"></el-input>
            <el-button type="primary" style="margin-left: 8px" @click="findBySearch()"  round>搜索</el-button>
            <el-button type="primary" @click="clean()" round>清空</el-button>
            <el-button type="success" @click="add()" round>新增</el-button>
        </div>
        <div class="table-container">
            <el-table
                :data="tableData"
                style="width: 100%;max-height: 100%;margin-bottom: 5px; margin-right: 5px;">
                <el-table-column prop="name" label="姓名" width="150">
                </el-table-column>
                <el-table-column prop="password" label="密码" width="150">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="150">
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="150">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="150">
                </el-table-column>
                <el-table-column prop="ownerName" label="发布的宠物" width="150">

                </el-table-column>

                <el-table-column label="操作">
                    <!--绑定整条数据  -->
                    <template slot-scope="scope">
                        <!-- 表示把当前这一行数据传给这个方法 -->
                        <el-button type="success" @click="edit(scope.row)" round>编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="deleteUser(scope.row.userId)">
                            <el-button slot="reference" type="danger" style="margin-left: 5px" round>删除</el-button>
                        </el-popconfirm>
                    </template>

                </el-table-column>
            </el-table>
        </div>
        <div class="block" style="margin-top: 20px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 对话框   -->
        <div>
            <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="20%">
                <el-form :model="form">
                    <el-form-item label="姓名" :label-width="formLabelWidth" width="50%">
                        <el-input v-model="form.name" autocomplete="off" style="width: 85%"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth" width="50%">
                        <template>
                            <el-radio v-model="form.sex" label="男">男</el-radio>
                            <el-radio v-model="form.sex" label="女">女</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="年龄" :label-width="formLabelWidth" width="50%">
                        <el-input v-model="form.age" autocomplete="off" style="width: 85%"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth" width="50%">
                        <el-input v-model="form.phone" autocomplete="off" style="width: 85%"></el-input>
                    </el-form-item>
                    <el-form-item label="发布的宠物" :label-width="formLabelWidth" width="50%">
                        <el-input v-model="form.ownerName" autocomplete="off" style="width: 85%"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogFormVisible = false" >取 消</el-button>
                    <el-button type="primary" @click="submit()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request"
// 假设userList包含了User表的数据，petList包含了Pet表的数据
export default {
    data() {
        return {
            params: {
                //是弱语言，不写也行
                name: '',
                phone: '',
                //分页需要传到后端的数据
                pageNum: 1,
                pageSize: 10,
            },
            tableData: [],
            total: 0,
            dialogFormVisible: false,
            form: {}
        }
    },

    //页面生成时需要做的事
    created() {
        this.findBySearch();

    },
    methods: {
        findBySearch() {
            request.get("/people/search",{
                params: this.params
            }).then(res=>{
                if (res.code === '0') {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        //弹出对话框
        add() {
            this.form = {}
            /*设置对话款能看到* 注意this*/
            this.dialogFormVisible = true
        },
        //清空
        clean() {
            this.params = {
                name:'',
                phone:'',
                pageNum: 1,
                pageSize: 10
            }
            this.findBySearch();
        },
        /*有一个回调参数 页数大小*/
        handleSizeChange(pageSize) {
            //给params里面的pageSize赋值
            this.params.pageSize = pageSize
            //还要查一遍才能显示数据
            this.findBySearch();
        },
        handleCurrentChange(pageNum) {
            this.params.pageNum = pageNum
            this.findBySearch();
        },
        //增加事件的接口
        submit() {
            request.post("/people/userSearch",this.form).then(res => {
                //注意此处的0带单引号
                if (res.code === '0') {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.dialogFormVisible = false;
                    this.findBySearch();
                } else {

                    this.$message.error(res.msg);
                }
            })
        },
        //编辑的方法
        edit(obj) {
            this.form = obj;
            this.dialogFormVisible = true;
            this.findBySearch();
        },


        deleteUser(userId) {
            console.log("Delete user method called with userId:", userId);
            request.delete("/people/" + userId).then(res => {
                console.log("Response from server:", res); // Add this line for debugging
                if (res.code === '0') {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.findBySearch();
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error' // Change type to 'error' for error messages
                    });
                }
            });
        }

    }
}
</script>
